<template>
    <!-- 事件脉络 -->
    <view class='venation_box'>
            <view class='time_box'>开始时间：{{startTime.slice(0,10)}}</view>
            <view class='venation_list'>
                <view v-for='item in content' :key='item.time'>
                    <view class='time'>
                        <text>{{time(item.time,"MM-DD hh:mm")}}</text>
                        <view>分析</view>
                    </view>
                    <view class='title'>{{item.title}}</view>
                    <view class='content'>
                        <view>
                            <view>
                                <text>来源：</text>
                                <text>{{item.source}}</text>
                            </view>
                            <view>
                                <text>倾向性：</text>
                                <text>{{name(item.sentiment)}}</text>
                            </view>
                        </view>
                        <view>
                            <text>相关词：</text>
                            <text>
                                <text v-for='(keyword,index) in item.keywords' :key='index'>
                                    {{index==item.keywords.length-1?keyword:keyword+"、"}}
                                </text>
                            </text>
                        </view>
                        <view>
                            <text>相同文章数：</text>
                            <text>{{item.count}}</text>
                        </view>
                    </view>
                    <view class='dot'></view>
                </view>
            </view>

    </view>
</template>

<script>
    export default {
        props: {
            content: Array,
            startTime: String
        },
        data() {
            return {
                time: this.$time,
                name(sen) {
                    switch(sen) {
                        case 0:
                            return "中性"
                        break;
                        case 1:
                            return "正面"
                        break;
                        case -1:
                            return "负面"
                        break;
                    }
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
.venation_box {
    width: 100%;
    .time_box {
        width: 320upx;
        height: 60upx;
        background:rgba(33,145,255,1);
        border-radius: 6upx;
        font-size: 24upx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .venation_list {
        padding-left: 12upx;
        box-sizing: border-box;
        >view {
            width: 100%;
            border-left: 1px solid #E2E2E2;
            box-sizing: border-box;
            padding-left: 25upx;
            font-size: 24upx;
            position: relative;
            &:nth-last-child(1) {
                border: none;
                &::before {
                    content: "";
                    width: 1upx;
                    height: 55upx;
                    background: #E2E2E2;
                    box-sizing: border-box;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .time {
                width: 100%;
                height: 50upx;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                color: #999;
                >view {
                    width: 100upx;
                    height: 100%;
                    color: #2191FF;
                    display: flex;
                    align-items: flex-end;
                    justify-content: flex-end;
                }
            }
            .title {
                color: #333;
                font-weight: 600;
                padding-bottom: 30upx;
            }
            .content {
                width: 100%;
                background: #F7F7F7;
                color: #999;
                padding: 25upx;
                box-sizing: border-box;
                border-radius: 8upx;
                >view {
                    width: 100%;
                    display: flex;
                    margin-bottom: 20upx;
                    &:nth-last-child(1) {
                        margin: 0
                    }
                    >view {
                        width: 50%;
                        >text:nth-child(2) {
                                color: #333;
                            }  
                    }
                    >text:nth-child(2) {
                        color: #333;
                    }
                }
            }
            .dot {
                width: 24upx;
                height: 24upx;
                border-radius: 50%;
                border: 1upx solid #2191FF;
                box-sizing: border-box;
                background: #fff;
                position: absolute;
                left: -14upx;
                top: 55upx;
                &::before {
                    content: "";
                    width: 10upx;
                    height: 10upx;
                    background: #2191FF;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translateX(-50%) translateY(-50%);
                }
            }
        }
    }
}
</style>